<html lang="zh-cn">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0"/>
    <meta name="format-detection" content="telephone=no"/>
    <title>会员中心</title>
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/assets/home/vendors/font-awesome/css/font-awesome.css"/>
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/assets/home/assets/css/common.css"/>

    <link rel="stylesheet" href="__PUBLIC__/assets/home/vendors/mobiscroll-master/css/mobiscroll.frame.css">
    <link rel="stylesheet" href="__PUBLIC__/assets/home/vendors/mobiscroll-master/css/mobiscroll.scroller.css">

    <link rel="stylesheet" href="__PUBLIC__/assets/home/vendors/datepicker-master/dist/datepicker.css">

    <style>
        .error {
            color: red;
        }
    </style>
</head>
<body class="confirm-page">
<section class="confirm">
    <h3>请完善您的个人信息</h3>

    <dl class="address">
        <dt class="fa fa-user">&nbsp;&nbsp; 姓名：{{$customer.nickname}}</dt>
        <br/>
        <dt class="fa fa-star-o">&nbsp;&nbsp; 生日：{{$customer.birthday}}</dt>
        <br/>
        <dt class="fa fa-mobile">&nbsp;&nbsp; 手机：{{$customer.mobile}}</dt>
        <br/>
        <dt class="fa fa-inbox">&nbsp;&nbsp; 邮箱：{{$customer.email}}</dt>
    </dl>

    <p id="createAddress"><b class="fa fa-edit"></b> 修改个人信息</p>

    <form class="am-form" action="{{:U('info')}}" method="post">
        <div class="address-form" style="padding-bottom: 14px;">
            <div class="control">
                <label>姓名</label>
                <input name="nickname" id="nickname" type="text" placeholder="请填写姓名" value="{{$customer.nickname}}"/>
            </div>

            <div class="control">
                <label>头像</label>
                <input type="text" class="new_thumb" placeholder="请点击上传头像"/>

                <div id="upload_one" style="display: none;"></div>
                <div id="view_one">
                    <input type="hidden" name="thumb"  value="{{$customer.thumb}}">
                    <img src="{{$customer.thumb}}" class="img-responsive"
                         style="margin-top:5px;max-height:70px;max-width: 200px;">
                </div>
            </div>

            <div class="control">
                <label>性别</label>
                <input type="text" id="sex" name="sex" placeholder="请输入性别: 1代表男；0代表女">
            </div>

            <div class="control">
                <label>生日</label>
                <input type="text" id="birthday" name="birthday" placeholder="生日格式yy-mm-dd" data-toggle="datepicker"
                       value="{{$customer.birthday}}" readonly/>
            </div>

            <div class="control">
                <label>手机</label>
                <input name="mobile" type="text" placeholder="请填写手机号" value="{{$customer.mobile}}"/>
            </div>

            <div class="control">
                <label>邮箱</label>
                <input name="email" id="email" type="text" placeholder="电子邮箱" value="{{$customer.email}}"/>
            </div>

            <div class="control">
                <label>地区</label>
                <input name="area" id="area" type="text" placeholder="请选择地区"
                       value="{{$customer.province}} {{$customer.city}} {{$customer.detail}}"/>
            </div>

            <input type="submit" class="primary" value="保存">

        </div>
    </form>
</section>
<script type="text/javascript" src="__PUBLIC__/assets/home/assets/js/jquery.min.js"></script>
<!--validate验证-->
<script src="__PUBLIC__/vendor/validate/jquery.validate.js"></script>
<script src="__PUBLIC__/vendor/validate/additional-methods.js"></script>
<script src="__PUBLIC__/vendor/validate/localization/messages_zh.min.js"></script>
<!--上传图片-->
<script src="__PUBLIC__/vendor/bootstrapextend/js/bootstrap.extend.js"></script>
<!--日期插件-->
<script src="__PUBLIC__/assets/home/vendors/datepicker-master/dist/datepicker.js"></script>
<script src="__PUBLIC__/assets/home/vendors/datepicker-master/i18n/datepicker.zh-CN.js"></script>
<!--省市区地址-->
<script src="__PUBLIC__/assets/home/vendors/mobiscroll-master/js/mobiscroll.core.js"></script>
<script src="__PUBLIC__/assets/home/vendors/mobiscroll-master/js/mobiscroll.frame.js"></script>
<script src="__PUBLIC__/assets/home/vendors/mobiscroll-master/js/mobiscroll.scroller.js"></script>
<script src="__PUBLIC__/assets/home/vendors/mobiscroll-master/js/mobiscroll.select.js"></script>
<script src="__PUBLIC__/assets/home/vendors/mobiscroll-master/js/i18n/mobiscroll.i18n.zh.js"></script>
<script src="__PUBLIC__/assets/home/assets/js/areas.js"></script>
<script>

    $(function () {
        //给上传图片按钮绑定事件
        $('.new_thumb').click(function () {
            $("#file_upload_1-button").click();
        })

        //上传单张
        $('#upload_one').Huploadify({
            uploader: '{{:U("Admin/Uploadfile/upload")}}',
            fileTypeExts: '*.gif;*.jpg;*.jpeg;*.png;*.bmp',
            //fileSizeLimit:{:C('UPLOAD_IMAGE_SIZE')}*1024,
            buttonText: '上 传 图 片',
            onUploadComplete: function (file, data) {
                data = $.parseJSON(data);
                $('#view_one img').attr('src', data.real_path);
                $('#view_one input').attr('value', data.real_path);
            }
        });

        //省市区插件
        $('#area').mobiscroll().scroller({
            theme: 'mobiscroll',
            lang: 'zh',
            display: 'top',
            fixedWidth: [100, 100, 100],
            onBeforeShow: function (inst) {
                var areaList = new Areas();
                inst.settings.wheels = [[areaList.getData(1), areaList.getData(inst._tempWheelArray[0]), areaList.getData(inst._tempWheelArray[1])]];
            },

            parseValue: function (val) {
                return [110000, 110100, 110101];
            },

            validate: function (html, index, time, dir, inst) {
                var areaList = new Areas();
                if (index == 0) {
                    inst.settings.wheels[0][1] = areaList.getData(inst._tempWheelArray[0]);
                    inst.changeWheel([1]);

                    inst.settings.wheels[0][2] = areaList.getData(inst._tempWheelArray[1]);
                    inst.changeWheel([2]);
                }
                if (index == 1) {
                    inst.settings.wheels[0][2] = areaList.getData(inst._tempWheelArray[1]);
                    inst.changeWheel([2]);
                }
            },

            formatValue: function (data) {
                var areaList = new Areas();
                return areaList.getNameById(data[0]) + ' ' + areaList.getNameById(data[1]) + ' ' + areaList.getNameById(data[2]);
            }
        });

        // 使用日期
        $('[data-toggle="datepicker"]').datepicker({
            language: 'zh-CN',
            format: 'yyyy-mm-dd'
        });

        //完善个人信息
        $(".am-form").validate({
            onfocusout: function (element) {
                $(element).valid();
            },

            rules: {
                nickname: {
                    required: true,
                    minlength: 5,
                    maxlength: 20
                },
                email: {
                    required: true,
                    email: true
                },
                mobile: {
                    required: true,
                    isMobile: true
                },
            },

            /**
             * 自定义提示信息
             */
            messages: {
                nickname: {
                    required: "请输入用户名"
                },
                email: {
                    required: "请输入邮箱",
                    email: "请输入正确的邮箱格式"
                },
                mobile: {
                    required: "请输入手机号码"
                },

            }
        });
    })
</script>
</body>
</html>